body {
  font-family: PingFangSC-Medium, "Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif;
}

.match__body {
  background: #FFF;
  padding-bottom: 12px;
}

.match__game,
.match__duration {
  font-size: 17px;
}

.match__game {
  padding: 14px 24px 0;
}

.match__duration {
  padding: 8px 24px 0;
}

.game__title,
.duration__title,
.match__title {
  color: #4A4A4A;
}

.match__graph {
  position: relative;
  width: 280px;
  height: 220px;
  /*- border: 1px solid #ccc;*/
  margin: 30px auto 0;
}

.match__graph .block {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.match__graph .block.block--empty {
  line-height: 38px;
  text-align: center;
  border: 1px solid #FBFBFB;
  font-size: 28px;
  background: #999999;;
  color: #FFF;
}

.block.block__1 {
  left: 0;
  right: 0;
  margin: auto;
}

.block.block__2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.block.block__3 {
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.block.block__4 {
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.line {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.line--forward,
.line--backward {
  color: #979797;
  background: #979797;
}

.line--forward:before {
  background: url(/images/arrow_1@2x.png) no-repeat;
  background-size: 100% 100%;
}

.line--backward:after {
  background: url(/images/arrow_1@2x.png) no-repeat;
  background-size: 100% 100%;
}

.line--forward {}
.line--backward {}

.line--forward.line--backward,
.line--twoway {
  color: #66B5F0;
  background: #66B5F0;
}

.line--forward.line--backward:before,
.line--forward.line--backward:after,
.line--twoway:before,
.line--twoway:after {
  background: url(/images/arrow_2@2x.png) no-repeat;
  background-size: 100% 100%;
}

.line__slash:before,
.line__slash:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  margin-top: -5.5px;
}

.line__slash:before {
  left: -2px;
  -webkit-transform: rotate3d(0,0,1, -90deg);
          transform: rotate3d(0,0,1, -90deg);
}

.line__slash:after {
  right: -2px;
  -webkit-transform: rotate3d(0,0,1, 90deg);
          transform: rotate3d(0,0,1, 90deg);
}

.line__slash {
  width: 37%;
  top: 30px;
  height: 1px;
  -webkit-transform-origin: 50% 80px;
      -ms-transform-origin: 50% 80px;
          transform-origin: 50% 80px;
}

.line__slash span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}

.line__1 {
  top: 39px;
  -webkit-transform: rotate3d(0,0,1, -41deg);
          transform: rotate3d(0,0,1, -41deg);
  -webkit-transform-origin: 50% 94px;
          -ms-transform-origin: 50% 94px;
      transform-origin: 50% 94px;
}

.line__1 span {
  -webkit-transform: rotate3d(0,0,1, 41deg);
          transform: rotate3d(0,0,1, 41deg);
}

.line__2 {
  top: 10px;
  -webkit-transform-origin: 43% 86px;
          -ms-transform-origin: 43% 86px;
      transform-origin: 43% 86px;
  -webkit-transform: rotate3d(0,0,1, -143deg);
          transform: rotate3d(0,0,1, -143deg);
}

.line__2 span {
  -webkit-transform: rotate3d(0,0,1, 143deg);
          transform: rotate3d(0,0,1, 143deg);
}

.line__3 {
  top: 30px;
  -webkit-transform: rotate3d(0,0,1, -217deg);
          transform: rotate3d(0,0,1, -217deg);
  -webkit-transform-origin: 60% 75px;
          -ms-transform-origin: 60% 75px;
      transform-origin: 60% 75px;
}

.line__3 span {
  -webkit-transform: rotate3d(0,0,1, 217deg);
          transform: rotate3d(0,0,1, 217deg);
}

.line__4 {
  top: 39px;
  -webkit-transform: rotate3d(0,0,1, 41deg);
          transform: rotate3d(0,0,1, 41deg);
  -webkit-transform-origin: 50% 94px;
          -ms-transform-origin: 50% 94px;
      transform-origin: 50% 94px;
}

.line__4 span {
  -webkit-transform: rotate3d(0,0,1, -41deg);
          transform: rotate3d(0,0,1, -41deg);
}

.line__diagonal {
  top: 0px;
  bottom: 0;
}

.line__diagonal:before,
.line__diagonal:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background-size: 100% 100%;
}

.line__diagonal:before {
  left: 0;
}

.line__diagonal:after {
  right: 0;
}

.line__diagonal span {
  position: absolute;
}

.line__5.line__diagonal {
  width: 1px;
  height: 60%;
}

.line__5.line__diagonal:before {
  left: -5.5px;
  top: -2px;
}

.line__5.line__diagonal:after {
  bottom: -2px;
  left: -5.5px;
  -webkit-transform: rotate3d(0,0,1, 180deg);
          transform: rotate3d(0,0,1, 180deg);
}

.line__5.line__diagonal span {
  left: 5px;
  top: 20%;
}

.line__6.line__diagonal {
  width: 67%;
  height: 1px;
}

.line__6.line__diagonal:before {
  top: -5.5px;
  left: -2px;
  -webkit-transform: rotate3d(0,0,1, -90deg);
          transform: rotate3d(0,0,1, -90deg);
}

.line__6.line__diagonal:after {
  top: -5.5px;
  right: -2px;
  -webkit-transform: rotate3d(0,0,1, 90deg);
          transform: rotate3d(0,0,1, 90deg);
}

.line__6.line__diagonal span {
  bottom: 0;
  left: 25%;
}

.match__results {
  margin-top:12px;
  background: #FFF;
}

.game__count,
.duration__text {
  color: #66B5F0;
}

.match__player:not(:first-child):before {
  content: '';
  position: absolute;
  top: 0px;
  width: 100%;
  height: 1px;
  background: #E9F1F4;
}

.match__player {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-direction: row;
      flex-direction: row;
  -webkit-box-align: center;
          -ms-flex-align: center;
      align-items: center;
  padding: 12px 12px 8px 24px;
  overflow: hidden;
}

.player__avatar {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 40px;
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  background: #999999;
}

.player__avatar--empty {
  line-height: 38px;
  text-align: center;
  border: 1px solid #FBFBFB;
  font-size: 28px;
  background: #999999;;
  color: #FFF;
}

.column {
  -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 0 16px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-direction: row;
      flex-direction: row;
  -webkit-box-pack: justify;
          -ms-flex-pack: justify;
      justify-content: space-between;
  font-family: PingFangSC-Regular, "Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif;
}

.player__name {
  font-size: 18px;
  color: #66B5F0;
  white-space: nowrap;
}

.player__score {
  font-size: 20px;
  color: #F15A5A;
}

.player__score--positive {
  color: #F15A5A;
}

.player__score--negative {
  color: #519B00;
}

.detail__item {
  font-size: 14px;
  color: #9B9B9B;
}

.badge__item:not(:first-child) {
  margin-left: 4px;
}
.badge__item {
  width: 60px;
  height: auto;
}

.modal--open .modal__overlay {
  opacity: 1;
  z-index: 10;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, .4);
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}

.modal__content {
  position: relative;
  top: 23%;
  max-width: 40%;
  max-width: 280px;
  margin: auto;
  border-radius: 4px;
}

.modal__header {
  padding: 11px 0;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  background: #66B5F0;
}

.modal__body {
  background: #FFF;
  text-align: center;
  padding: 13px 0 19px;
}

.modal__pics {
  display: none;
}

.modal__overlay.modal--crocodile .pics__crocodile {
  display: block;
}

.modal__overlay.modal--star .pics__star {
  display: block;
}

.modal__overlay.modal--rabbit .pics__rabbit {
  display: block;
}

.modal__overlay.modal--crocodile .pic_item {
  color: #48B3A0;
}

.modal__overlay.modal--star .pic_item {
  color: #F6A623;
}

.modal__overlay.modal--rabbit .pic_item {
  color: #460c00;
}


.pic_item {
  display: inline-block;
  width: 34%;
  line-height: 85px;
  font-family: DFWaWaSC-W5, "Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif;
  font-size: 60px;
  vertical-align: middle;
}

.pics__rabbit .pic_item{
  width: 19%;
}

.pic_item:not(:first-child) {
  margin-left: 10px;
  width: 45%;
  text-align: right;
}

.modal__desc {
  margin-top: 19px;
  font-size: 18px;
  color: #4A4A4A;
  font-family: PingFangSC-Regular, "Helvetica Neue",Helvetica,"Roboto",Arial,sans-serif;
}

.modal__action {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -127px;
  text-align: center;
}

.action__close {
  width: 40px;
  height: 40px;
  padding: 0 0 7px 0;
  font-size: 36px;
  color: #FFF;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #66B5F0;
}
